/* 根据传递的参数id，渲染商品详情页面 */
function getProductById(id) {
    $.ajax({
        type: 'get',
        url: 'http://192.168.1.110:8088/api/find',
        data: {
            id
        },
        success: function (result) {
            if (result.resultCode == 1) {
                let data = result.resultInfo
                let productHtml = template('productList', data)
                $(".product .container .right").html(productHtml)
                onMouseMove()
            }
        }
    })
}

/* 把商品添加到本地存储，并跳转到购物车页面 */
function saveCart() {
    $.ajax({
        type: 'get',
        url: 'http://192.168.1.110:8088/api/find',
        data: {
            id
        },
        success: function (result) {
            if (result.resultCode == 1) {
                let products = result.resultInfo
                let cartList = JSON.parse(localStorage.getItem('CART')) || []
                console.log(cartList)
                let newProducts = cartList.find(item => {
                    return item.id == products.id
                })
                if (newProducts) {
                    newProducts.num++
                } else {
                    cartList.push({
                        num: 1,
                        singleTotal: 0,
                        state: false,
                        ...products
                    })
                }
                localStorage.setItem('CART', JSON.stringify(cartList))
                if (confirm('加入购物车成功！是否跳转到购物车页面')) {
                    location.href = './cart.html'
                    let stateAll = false
                    localStorage.setItem('STATEALL', stateAll)
                }
            }
        }
    })
}

/**
 * @description: 放大镜
 */

/* 设置遮罩层随鼠标移动 */
function onMouseMove() {
    /* 鼠标移入出现，移出消失 */
    $('.right .item').on('mouseover', function() {
            $('.right .item .section').toggleClass('active')
            $('.right .bigPic').toggleClass('active')
        })
        .on('mouseout', () => {
            $('.right .item .section').toggleClass('active')
            $('.right .bigPic').toggleClass('active')
        })
        /* 设置区块边界 */
        .on('mousemove', (e) => {
            e = e || window.event
            /* 设置鼠标在区块中间 */
            let x = e.offsetX - $('.right .item .section').innerWidth() / 2
            let y = e.offsetY - $('.right .item .section').innerHeight() / 2

            /* 边界判定 */
            if (x < 0) {
                x = 0
            }
            if (x > $('.right .item').innerWidth() - $('.right .item .section').innerWidth()) {
                x = $('.right .item').innerWidth() - $('.right .item .section').innerWidth()
            }
            if (y < 0) {
                y = 0
            }
            if (y > $('.right .item').innerHeight() - $('.right .item .section').innerHeight()) {
                y = $('.right .item').innerHeight() - $('.right .item .section').innerHeight()
            }
            $('.right .item .section').css('left',x+'px')
            $('.right .item .section').css('top',y+'px')

            /* 放大镜移动效果实现 */
            /**
             *   遮罩层大小             放大镜大小
             * -------------   =    --------------
             *   遮罩层移动距离        背景图片移动距离
             * 
             *   背景图片移动距离 = 放大镜大小 * 遮罩层移动距离 / 遮罩层大小
             */
            let moveX = $('.bigPic').innerWidth() * x / $('.right .item .section').innerWidth()
            let moveY = $('.bigPic').innerHeight() * y / $('.right .item .section').innerHeight()

            $('.bigPic img').css('left',-moveX + 'px')
            $('.bigPic img').css('top',-moveY + 'px')


            /**
             * 背景图片尺寸
             * 
             *   遮罩层尺寸                  放大镜尺寸 
             * -----------------      =    -------------
             *  显示图片盒子尺寸             背景图片尺寸
             *  
             *    背景图片尺寸 =  放大镜尺寸 * 显示图片盒子尺寸 / 遮罩层尺寸
             */
            let bigPicWidth = $('.bigPic').innerWidth() * $('.right .item').innerWidth() / $('.right .item .section').innerWidth()
            let bigPicHeight = $('.bigPic').innerHeight() * $('.right .item').innerHeight()/ $('.right .item .section').innerHeight()

            $('.bigPic img').css('width',bigPicWidth + 'px')
            $('.bigPic img').css('height',bigPicHeight + 'px')
        })
}




let hrefStr = location.href
let id = hrefStr.split('=')[1]
getProductById(id)
